<template>
    <div>
        <ul>
            <h2 :style="{opacity}">欢迎学习Vue</h2>
            <li>news001 <input type="text"/></li>
            <li>news002 <input type="text"/></li>
            <li>news003 <input type="text"/></li>
        </ul>
    </div>
</template>

<script>
    export default {
        name:'News',
        data() {
            return {
                opacity:1
            }
        },
        // beforeDestroy(){
        //     console.log('New组件被销毁了');
        //     clearInterval(this.timer);
        // // },
        // mounted(){
        //     this.timer = setInterval(() => {
        //         console.log("@");
        //         this.opacity -= 0.1;
        //         if(this.opacity <= 0) this.opacity = 1
        //     },100);
        // },
        
        // 路由组件所独有的两个钩子，用于捕获路由的激活状态。
        activated(){ // 点击跳转到该组件时会触发这个函数，就是激活。
            console.log('News组件激活了');
            this.timer = setInterval(() => {
                console.log("@");
                this.opacity -= 0.1;
                if(this.opacity <= 0) this.opacity = 1
            },100);
        },
        deactivated(){ // 从该组件跳转到另外的组件时会触发这个函数，就是失活（失活不代表销毁，可以使用keep-alive缓存路由组件）。
            console.log('News组件失活了');
            clearInterval(this.timer);
        },
    }
</script>